<template>
  <div
    class="flex px-24 h-58 items-center auto-bg justify-between"
    border-b="1px solid normal_border"
  >
    <slot name="title">
      <div class="flex items-center">
        <a-button
          v-if="route.meta?.back"
          type="text"
          @click="onBack"
          size="small"
          class="mt-2 mr-10"
        >
          <template #icon>
            <ArrowLeftOutlined></ArrowLeftOutlined>
          </template>
        </a-button>
        <a-breadcrumb>
          <a-breadcrumb-item class="font-600 text-18" v-for="menu in menus">
            {{ menu.name }}
          </a-breadcrumb-item>
        </a-breadcrumb>
      </div>
    </slot>
    <a-space>
      <slot name="toolbar">
        <SearchMenus></SearchMenus>
      </slot>
    </a-space>
  </div>
</template>
<script setup lang="ts">
import SearchMenus from '../../components/search-menu.vue'
import { PermissionDto } from '@/api/permission.ts'
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
import { router } from '@/router'

const route = useRoute()

defineProps<{ menus: PermissionDto[] }>()

const onBack = () => {
  router.back()
}
</script>
